import React from 'react'
import { useEffect, useState } from "react"
import { Button, Table, Input, Switch, Image, Select } from 'antd';
import './ProList.scss'

import { getAllCategoryFn, getProductListByCategoryFn, getProductListFn, updateProductStatusFn } from '../../api/product';
export default function ProList() {
  // 商品列表
  const [proList, setProList] = useState([])
  // 页码
  const [count, setCount] = useState(1)
  // 每页显示数量
  const [limitNum, setLimitNum] = useState(5)
  // 总数
  const [total, setTotal] = useState(0)
  // 搜索内容
  const [search, setSearch] = useState('')
  // 选中的分类内容
  const [category, setCategory] = useState('')
  // 分类列表
  const [categoryList, setCategoryList] = useState([])
  const columns = [
    {
      title: '序号',
      width: 80,
      render: (v, r, i) => <span style={{
        display: "inline-block", width: "25px", height: "25px", borderRadius: "5px", border: "1px solid #ccc", textAlign: "center",
      }}>{(count - 1) * limitNum + i + 1}</span>,
    },
    {
      title: '商品名称',
      dataIndex: 'proname',
      width: 220,
      // 文本超出隐藏
      render: (proname) => <p className='text-ellipsis'>{proname}</p>,

    },
    {
      title: '商品图片',
      dataIndex: 'img1',
      render: (img1) => <Image src={img1} alt="" style={{ width: "70px", height: "70px" }} />,
    },
    {
      title: '商品分类',
      dataIndex: 'category',
      render: (category) => <div >{category}</div>,
      filters: [
        {
          text: "分类",
          value: "分类",
        },],

    },
    {
      title: '商品价格',
      dataIndex: 'originprice',
      render: (price) => <div>{price}</div>,
      key: "originprice",
      sorter: (a, b) => a.originprice - b.originprice,

    },
    {
      title: '商品折扣',
      dataIndex: 'discount',
      key: 'discount',
      sorter: (a, b) => a.discount - b.discount,
    },
    {
      title: '是否推荐',
      dataIndex: 'isrecommend',
      render: (is, r, i) => <Switch checked={is} onChange={(e) => {
        // console.log(e);
        updateMyProductStatus({ proid: r.proid, type: 'isrecommend', flag: e })

      }} />
    },
    {
      title: '是否售卖',
      dataIndex: 'issale',
      render: (is, r, i) => <Switch checked={is} onChange={(e) => {
        // console.log(e);
        updateMyProductStatus({ proid: r.proid, type: 'issale', flag: e })

      }} />
    },
    {
      title: '是否秒杀',
      dataIndex: 'isseckill',
      render: (is, r, i) => <Switch checked={is} onChange={(e) => {
        // console.log(e);
        updateMyProductStatus({ proid: r.proid, type: 'isseckill', flag: e })

      }} />
    },
  ];
  // axios获取商品数组
  const getMyProList = () => {
    getProductListFn({ count, limitNum }).then(res => {
      // console.log(res.data);
      setProList(res.data)
      setTotal(res.total)
    })
  }
  useEffect(() => {
    getMyProList()
    getCategoryList()
  }, [count])
  // 搜索商品
  const searchProFn = () => {
    getProductListByCategoryFn({search,category}).then(res => {
      console.log(res);
      setProList(res.data)
      setTotal(res.total)
    })
  }
  // 修改是否推荐或热门
  const updateMyProductStatus = (data) => {
    // console.log('1111111');
    console.log(data);
    updateProductStatusFn(data).then(res => {
      console.log(res);
      if (res.code == 200) {
        getMyProList()
      }
    })
  }
  // 获取分类
  const getCategoryList = () => {
    getAllCategoryFn().then(res => {
      console.log(res);
      // setCategoryList(res.data)
      const arr = []
      res.data.forEach(item => {
        arr.push({
          value: item,
          label: item
        })
      });
      setCategoryList(arr)
    })
  }
  return (
    <div style={{ display: 'flex', flexDirection: "column", }}>
      {/* 搜索框 */}
      <span style={{ fontSize: "18px", fontWeight: 700 }}>商品列表</span>
      <div className="proHeader" style={{ display: 'flex' }}>

        <Select width="100px" placeholder='请选择类型' options={categoryList} onChange={(value) => {
          setCategory(value)
        }}></Select>

        <Input value={search} onChange={(e) => {
          setSearch(e.target.value)
        }} style={{ width: "250px",margin:"0 10px" }} placeholder="请输入商品名称" />
        <Button onClick={() => {
          searchProFn()
        }}>搜索</Button>
      </div>
      {/* 商品各种信息 */}
      <Table
        style={{ flex: 1 }}
        rowKey={'proid'}
        dataSource={proList}
        columns={columns}
        scroll={{ y: 450 }}
          // 列排序文字说明
        locale={{
          triggerDesc: '点击降序',
          triggerAsc: '点击升序',
          cancelSort: '取消排序',
        }}
        pagination={{
          pageSize: limitNum, onChange(page) {
            setCount(page)
          }, responsive: true, current: count,
          total: total,

        }
        } ></Table>
    </div>
  )
}
